<template>
  <div>
    <!-- 视频标题 -->
    <div class="video-title">
      <h1 class="tip-container">
        <a class="video-tip">活动作品</a>
        <span class="tip">{{ videoDetail.title }}</span>
      </h1>
      <div class="visitor-number">
        <span v-if="stat.view" class="view">{{ localNum(stat.view, 1) }}播放</span>
        <span class="dm">总弹幕数{{ stat.danmaku }}</span>
        <span v-if="videoDetail.ctime">
          {{ moment(videoDetail.ctime * 1000).format('YYYY-MM-DD hh:mm:ss') }}
        </span>
      </div>
    </div>
    <Player v-if="videoDetail.cid" :aid="props.aid" :bvid="props.bvid" :cid="videoDetail.cid" />
    <div v-else style="height: 573px; width: 854px; background-color: #000"></div>
    <!-- 观众互动 -->
    <div class="video-footer">
      <div class="footer-container">
        <div class="footer-center">
          <div class="visitor">{{ online.count }}人在看</div>
          <div class="damns">
            <span class="footer-damn iconfont icon-087tanmuopen"></span>
            <span class="footer-setting iconfont icon-xitongshezhi"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="video-select">
      <div class="select-left">
        <div v-if="stat.like">
          <span class="iconfont icon-dianzan_kuai"></span>
          {{ localNum(stat.like, 1) }}
        </div>
        <div v-if="stat.coin">
          <span class="iconfont icon-taojinbi"></span>
          {{ localNum(stat.coin, 1) }}
        </div>
        <div v-if="stat.favorite">
          <span class="iconfont icon-shoucangxuanzhong"></span>
          {{ localNum(stat.favorite, 1) }}
        </div>
        <div v-if="stat.share">
          <span class="iconfont icon-fenxiang"></span>
          {{ localNum(stat.share, 1) }}
        </div>
      </div>
      <div class="select-right">
        <div class="right-appeal">
          <span class="right-tip">稿件投诉</span>
          <button class="select-btn iconfont icon-bianji">笔记</button>
        </div>
        <span class="select-more iconfont icon-24gf-ellipsisVertical"></span>
      </div>
    </div>
    <!-- 作者文案 -->
    <div class="video-desc">
      <div class="tip-info">
        <span class="copyright">
          <i class="iconfont icon-icon-test-copy"></i>
          未经作者授权，禁止转载
        </span>
      </div>
      <div class="desc-title">
        {{ videoDetail.desc }}
      </div>
    </div>
    <!-- 视频标签 -->
    <div class="video-tag">
      <ul class="tag-container" v-for="(tags, index) in tag" :key="index">
        <li class="tag-list">
          <div class="tag-item">
            <a class="tag" href="">{{ tags.tag_name }}</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  // import { useRoute } from 'vue-router'

  export default defineComponent({
    name: 'VideoPlay',
  })
</script>

<script lang="ts" setup>
  import { onMounted } from 'vue'
  import Player from './Player.vue'
  import { localNum } from '@/utils/lib'
  import moment from 'moment'
  import {
    reqVideoInfo,
    // reqVideoLike,
    reqVideoOnline,
    reqVideoTag,
    // reqVideoUrl,
    reqVideoStat,
    videoInfo,
    videoTag,
    videoStatus,
    onlineNumber,
  } from '@/api/video'

  const emit = defineEmits(['sendMid'])

  const videoDetail = ref<Partial<videoInfo>>({})
  const stat = ref<Partial<videoStatus>>({})
  const online = ref<Partial<onlineNumber>>({})
  const tag = ref<videoTag[]>([])

  //视频详情
  async function getVideoInfo(id: number | string) {
    const res = await reqVideoInfo(id)
    emit('sendMid', res.owner.mid)
    videoDetail.value = res
    getOnline(id, res.cid)

    // console.log('videoInfo', videoInfo)
    // const videoDetail = videoInfo
    // console.log('videoDetail', videoDetail)
  }

  // async function getVideoLike(id: number, csrf: string) {
  //   const like = await reqVideoLike(id, csrf)
  // }

  //视频在线
  async function getOnline(id: number | string, cid: number) {
    online.value = await reqVideoOnline(id, cid)
    // console.log('onlineNumber', online.value)
  }

  //标签
  async function getVideoTag(id: number | string) {
    tag.value = await reqVideoTag(id)
    // console.log('videoTag', Tag.value)
  }

  //视频状态
  async function getVideoStat(id: number | string) {
    stat.value = await reqVideoStat(id)
    // console.log('videoStat', stat.value)
  }

  //视频url
  // async function getVideoUrl(aid: number, cid: number) {
  //   const videoUrl = await reqVideoUrl(aid, cid)
  //   console.log('videoUrl', videoUrl)
  // }

  const props = defineProps<{
    aid: number
    bvid: string
  }>()

  // const route = useRoute()
  onMounted(() => {
    // const aid = Number(route.query.aid)
    // const bvid = route.query.bvid
    getVideoInfo(props.aid || props.bvid)
    getVideoTag(props.aid || props.bvid)
    getVideoStat(props.aid || props.bvid)
    // const url = getVideoUrl(209462320, 448908784) //403
  })
</script>

<style scoped>
  @import url('//at.alicdn.com/t/font_2978613_yq6p727ipm.css');
</style>

<style lang="less" scoped>
  .video-title {
    width: 854px;
    height: 69px;
    padding-top: 27px;
    .tip-container {
      width: 854px;
      height: 26px;
      margin-bottom: 8px;
      .video-tip {
        width: 48px;
        height: 22px;
        margin-right: 10px;
        padding: 5px 5px;
        border-radius: 2px;
        color: white;
        font-size: 12px;
        text-align: center;
        background-color: pink;
      }
      .tip {
        font-size: 18px;
      }
    }
    .visitor-number {
      width: 854px;
      span {
        margin-right: 12px;
        font-size: 12px;
        color: #999;
      }
    }
  }
  .video-footer {
    width: 853px;
    height: 46px;
    box-shadow: 0 0 8px #e5e9ef;
    line-height: 46px;
    .footer-container {
      width: 854px;
      height: 60px;
      .footer-center {
        display: flex;
        justify-content: space-around;
        width: 834px;
        height: 46px;
        padding: 0 12px;
        .visitor {
          width: 300px;
          font-size: 14px;
          margin-right: 12px;
        }
        .damns {
          display: flex;
          justify-content: flex-end;
          width: 426px;
          .footer-damn {
            font-size: 20px;
            margin-right: 11px;
          }
          .footer-setting {
            font-size: 20px;
            margin-right: 11px;
          }
          .send-damns {
            display: flex;
            align-items: center;
            outline: none;
            .damn-ipt {
              width: 294px;
              height: 28px;
              line-height: 28px;
              padding: 0 10px;
              border: 1px solid #999;
              background-color: #ccc;
              outline: none;
            }
            .btn {
              outline: none;
              .damn-btn {
                width: 56px;
                height: 30px;
                outline: none;
              }
            }
          }
        }
      }
    }
  }
  .video-select {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    .select-left {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 400px;

      div {
        display: flex;
        align-items: center;
        font-size: 12px;
        cursor: pointer;
        transition: color 300ms;
        color: #757575;
        &:hover {
          color: #008ac5;
        }
        .iconfont {
          margin-right: 4px;
          font-size: 24px;
        }
      }
    }
    .select-right {
      display: flex;
      justify-content: space-around;
      font-size: 12px;
      .right-appeal {
        display: flex;
        justify-content: space-evenly;
        width: 166px;
        margin-right: 20px;
        .right-tip {
          line-height: 26px;
          cursor: pointer;
          &:hover {
            color: #008ac5;
          }
        }
        .select-btn {
          width: 73px;
          height: 26px;
          line-height: 26px;
          font-size: 12px;
          color: #00a1d6;
          border-radius: 3px;
          border: 1px solid #00a1d6;
          background-color: white;
          cursor: pointer;
          &:hover {
            color: white;
            background-color: #00a1d6;
          }
        }
      }
      .select-more {
        cursor: pointer;
      }
    }
  }

  .video-desc {
    margin: 16px 0 0;
    .tip-info {
      margin-bottom: 15px;
      .copyright {
        margin-right: 20px;
        color: #999;
        font-size: 12px;
      }
    }
    .desc-title {
      font-size: 12px;
      color: #212121;
    }
  }
  .video-tag {
    display: flex;
    flex-wrap: wrap;
    width: 854px;
    padding: 12px 0;
    margin-top: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    .tag-container {
      display: flex;
      // flex-wrap: wrap;
      padding: 0;
      list-style: none;
      .tag-list {
        line-height: 24px;
        text-align: center;
        .tag-item {
          padding: 0 12px;
          margin-right: 10px;
          margin-bottom: 8px;
          background-color: #f6f7f8;
          border-radius: 15px;
          box-sizing: border-box;
          &:hover {
            outline: 1px solid #008ac5;
          }
        }
        .tag {
          font-size: 12px;
          color: #61666d;
          text-decoration: none;
        }
      }
    }
  }
</style>
